import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Form, Button } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import ManageList from '@/components/ManageList';
import SelectForm from '@/components/SelectForm';
import TableButtons from '@/components/TableButtons';
import RightDraw from '@/components/RightDraw';
import StandardTable from '@/components/StandardTable';
import AntdFormItem from '@/components/AntdFormItem';
import AdSelect from '@/components/AdSelect';
import AntdDatePicker from '@/components/AntdDatePicker';
import AdButton from '@/components/AdButton';
import PartsOfferDetail from './PartsOfferDetail';
import { queryPerson, queryDict } from '@/utils/common';
import { allDictList } from '@/utils/constans';
import {
  selectPartsOfferList,
  allDispatchType,
  codes,
  routeUrl,
  dispatchPartsOffer,
  formate,
  renderTableAdSearch,
  renderTableAdSelect,
  allUrl,
  formateNOSecond,
  getStateValue,
} from './utils';

@ManageList
@connect(({ partsOffer, component, loading }) => ({
  partsOfferList: partsOffer.partsOfferList,
  formValues: partsOffer.formValues,
  searchValue: component.searchValue,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.list],
}))
@Form.create()
export default class PartsOfferList extends Component {
  state = {
    visible: false,
    detailId: '',
  };
  className = 'partsOfferList';

  columns = [
    {
      title: '单据号',
      dataIndex: 'offerNo',
      render: (text, record) => (
        <AdButton
          mode="a"
          onClick={e => this.showDetail(e, record.id)}
          text={text}
          code={codes.showDetail}
        />
      ),
      fixed: this.props.isMobile ? false : true,
    },
    {
      title: '供应商',
      dataIndex: 'mdsCompanyId',
      width: 200,
      render: text =>
        renderTableAdSelect({ props: this.props, value: text, key: allDictList.partsSupplier }),
    },
    {
      title: '报价日期',
      dataIndex: 'offerDate',
    },
    {
      title: '有效时间',
      dataIndex: 'effeTimeBegin',
      width: 200,
      render: (_, record) => {
        const { effeTimeBegin, effeTimeEnd } = record;
        const text = `${effeTimeBegin}~${effeTimeEnd}`;
        return <span title={text}>{text}</span>;
      },
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      render: text => renderTableAdSearch({ props: this.props, value: text }),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: text => moment(text).format(formateNOSecond),
    },
    {
      title: '状态',
      dataIndex: 'effeStatus',
      render: text => getStateValue(text),
    },
    {
      title: '更新人',
      dataIndex: 'updateBy',
      render: text => renderTableAdSearch({ props: this.props, value: text }),
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      render: text => moment(text).format(formateNOSecond),
    },
  ];

  componentWillMount() {
    const allDict = [allDictList.partsSupplier];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    this.selectPartsOfferList();
  }

  /**
   * form 查找条件 重置
   */
  handleFormReset = () => {
    const { form } = this.props;
    this.saveAllValue();
    this.selectPartsOfferList();
  };

  /**
   * form 查找条件 查询
   */
  handleSearch = formValues => {
    if (!formValues) return;
    const { effeTime, ...params } = formValues;
    if (effeTime&&effeTime.length>=0) {
      params.effeTimeBegin = moment(effeTime[0]).format(formate);
      params.effeTimeEnd = moment(effeTime[1]).format(formate);
    }else{
      params.effeTimeBegin=''
      params.effeTimeEnd=''
    }
    this.saveAllValue(params);
    this.selectPartsOfferList(params);
  };

  /**
   * table 表格 分页操作
   */
  handleStandardTableChange = param => {
    const { formValues } = this.props;
    this.selectPartsOfferList({ ...formValues, ...param });
  };

  /**
   *  查看详情
   */
  showDetail = (e, detailId) => {
    e.stopPropagation();
    this.handleStateChange([{ detailId }, { visible: true }]);
  };

  //新建
  handleAdd = () => {
    router.push(routeUrl.add);
  };

  //编辑
  handleEdit = () => {
    const { detailId } = this.state;
    this.handleStateChange([{ visible: false }]);
    router.push(`${routeUrl.edit}/${detailId}`);
  };

  selectPartsOfferList = payload => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.list,
      payload: payload || {},
      callback: data => {
        if (!data) return;

        queryPerson({ data, props: this.props, url: allUrl.userList });
      },
    });
  };

  saveAllValue = payload => {
    const { dispatch } = this.props;
    dispatch({
      type: allDispatchType.value,
      payload: payload || {},
    });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };

  render() {
    const {
      form,
      form: { getFieldDecorator },
      loading,
      partsOfferList,
    } = this.props;

    const { isMobile, visible, detailId } = this.state;

    const commonParams = {
      getFieldDecorator,
    };

    const firstFormItem = (
      <AntdFormItem label="供应商" code="mdsCompanyId" {...commonParams}>
        <AdSelect payload={{ code: allDictList.partsSupplier }} />
      </AntdFormItem>
    );
    const secondFormItem = (
      <AntdFormItem label="有效期" code="effeTime" {...commonParams}>
        <AntdDatePicker mode="range" />
      </AntdFormItem>
    );
    const selectFormParams = {
      firstFormItem,
      secondFormItem,
      form,
      className: this.className,
      handleFormReset: this.handleFormReset,
      handleSearch: this.handleSearch,
      toggleForm: expandForm => {
        this.handleStateChange([{ expandForm }]);
      },
      code: codes.select,
    };

    const tableButtonsParams = {
      handleAdd: this.handleAdd,
      code: codes.add,
    };

    const rightDrawParams = {
      isMobile,
      visible,
      title: '配件报价详情',
      code: codes.showDetail,
      closeDetail: this.handleStateChange.bind(this, [{ visible: false }]),
      buttons: (
        <Button.Group>
          <AdButton onClick={this.handleEdit} type="primary" text="编辑" code={codes.edit} />
        </Button.Group>
      ),
    };

    return (
      <>
        <SelectForm {...selectFormParams} />
        <TableButtons {...tableButtonsParams} />
        <StandardTable
          loading={loading}
          data={partsOfferList}
          disabledRowSelected={true}
          columns={this.columns}
          onPaginationChange={this.handleStandardTableChange}
          className={this.className}
          code={codes.page}
          expandForm={false}
        />
        <RightDraw {...rightDrawParams}>
          <PartsOfferDetail id={detailId} />
        </RightDraw>
      </>
    );
  }
}
